xinkeaboard/xinkeaboard-web/pages/store/about/[about].vue

<template>
  <div class="self_background">
    <StoreHeaderCat />
    <div class="wrap clearfix">
      <div class="sr-layout-block J-block sr-comProfile">
        <div class="sr-txt-title">
          <h2 class="sr-txt-h2">{{L['公司简介']}}</h2>
        </div>
        <div class="sr-comProfile-info-wrap cf">
          <div class="sr-comProfile-info-l">
            <img
                v-show="imgTopArr.data.length  == 1"
              :src="imgTop"
            />

            <SliderStoreAbout   v-show="imgTopArr.data.length > 1" :itemData="imgTopArr.data" :itemIndex="0"/>


          </div>
          <div class="sr-comProfile-infos infos-top">
            <div
          class="J-txt-wrap sr-comProfile-intro"
          :class="showMore || !showMoreBtn ? 'more' : ''">
          <div ref="contentWrap" class="intro-cnt J-txt-cnt" v-html="contentTop"></div>
          <a
            v-if="showMoreBtn"
            href="javascript:void(0);"
            class="sr-comProfile-more J-show-more"
            rel="nofollow"
            @click="showMoreFun"
            >{{ showMore ? L["收起"] : L["查看更多"] }}</a
          >
        </div>
          </div>
        </div>

      </div>


      <div class="sr-layout-block pad-block J-block ">
        <div class="sr-txt-title">
          <h2 class="sr-txt-h2">{{L['公司展示']}}</h2>
        </div>


        <!--公司展示-->
        <SliderStore :itemData="compayShow.data" :itemIndex="0"/>
      </div>

      <!--荣誉资质-->
      <div class="sr-layout-block pad-block J-block ">
        <div class="sr-txt-title">
          <h2 class="sr-txt-h2">{{L['荣誉展示']}}</h2>
        </div>

        <SliderStore :itemData="honors.data" :itemIndex="1"/>
      </div>
    </div>
  </div>
</template>

<script setup>
// import { lang_zn } from "@/assets/language/zh.js";
import { getCurLanguage } from '@/composables/common.js';

// const L = lang_zn;
const L = getCurLanguage();
const showMore = ref(false);
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const vid = calcUrlShopId(route.path);
const compayShow = reactive({ data:[]});
const honors = reactive({data:[]})
const imgTopArr = reactive({data:[]})

const imgTop = ref('')
const contentTop = ref('')
const contentWrap = ref(null)
const showMoreBtn = ref(false)
useHead({
    title: 'Store About Us',
    meta: [
      {
        name: "description",
        content:'Store About Us',
      },
      {
        name: "keywords",
        content: 'Store About Us',
      },
    ],
  });

const showMoreFun = () => {
  showMore.value = !showMore.value;
};

const getData = async () => {
    const {data:value} = await useFetchRaw(apiUrl + 'v3/seller/front/store/detail?storeId='+vid)
    const res = value._rawValue
    if(res.state == 200){
      honors.data = res.data.storeCertificateList
      compayShow.data = res.data.storeCompanyShowList
      imgTopArr.data = res.data.storeProfileList
      imgTop.value = res.data.storeProfileList[0].imgUrl
      contentTop.value = (res.data.storeProfileTextList != null ? res.data.storeProfileTextList.content : '')
      await nextTick()
      if(contentWrap.value.clientHeight > 290){
        showMoreBtn.value = true
      }else{
        showMoreBtn.value = false
      }
    }
}

getData();

onMounted(() => {
  setTimeout(() => {
    sldStatEvent({ behaviorType: 'spv', storeId: vid ,pageUrl: defaultUrl + router.currentRoute.value.path, referrerPageUrl: apiUrl });
    }, 3000)
});



</script>

<style lang="scss" scoped>
@use "@/assets/style/base.scss" as *;
@use "@/assets/style/store/contac-about.scss" as *;
.sld_store_list {
  :deep .sld_vendor_goods{
  width: 1140px;

}
}
</style>